{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">ora脚本位置管理 &nbsp
            <button type="button" class="btn btn-primary" onclick="upload_ora_file()"><span
                    class="glyphicon glyphicon-cloud-upload"
                    aria-hidden="true"></span>
                {% if is_upload == 'yes' %}
                    重新上传脚本
                {% else %}
                    上传脚本
                {% endif %}
            </button>
        </h3>
        <div class="text-info">
            <li style="color: red">
                ora 脚本有专利保护，不得随意传播.
            </li>
            <li style="color: red">
                请合法获得,脚本获取联系(vx).
            </li>
            <li style="color: red">
                v: ora_service (脚本作者)
            </li>
            <li style="color: red">
                v: Liwk09071327 (网站作者)
            </li>
        </div>
        &nbsp
        <div class="col-md-12 column">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    {#                    <th>+</th>#}
                    <th>IP</th>
                    <th>USER</th>
                    <th>PATH</th>
                    <th>LOAD_TIME</th>
                    <th>REMARK</th>
                </tr>
                </thead>
                <tbody id="tabbody">

                <tr>
                    {#                        <td><input type="checkbox"/></td>#}
                    <td style="display:none">{{ ora_pos_info.id }}</td>
                    <td>{{ ora_pos_info.ip_info }}</td>
                    <td>{{ ora_pos_info.user_info }}</td>
                    <td>{{ ora_pos_info.path_info }}</td>
                    <td>{{ ora_pos_info.crtime | date:'Y-m-d H:i:s' }}</td>
                    <td>{{ ora_pos_info.remark_info }}</td>
                </tr>

                </tbody>
            </table>

        </div>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">ora脚本历史版本</h3>
        <div class="col-md-12 column" id="table_pagination">
            <div class="col-md-2">
                <input type="text" name="user_search" class="form-control" placeholder="Search" id="aa_search"
                       aa_search_set="{{ search }}">
            </div>
            <button type="button" class="btn btn-default" onclick="select_page_num(1)"><span
                    class="glyphicon glyphicon-search"
                    aria-hidden="true"></span> 搜索
            </button>
            <div>&nbsp</div>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    {#                    <th>+</th>#}
                    <th>服务器IP</th>
                    <th>用户名</th>
                    <th>端口</th>
                    <th>PATH</th>
                    <th>备注</th>
                    <th>时间</th>
                    <th>内容</th>
                </tr>
                </thead>
                <tbody id="tabbody">
                {% for i in current_page %}
                    <tr>
                        {#                        <td><input type="checkbox"/></td>#}
                        <td style="display:none">{{ i.id }}</td>
                        <td>{{ i.server_ip }}</td>
                        <td>{{ i.user_info }}</td>
                        <td>{{ i.server_port }}</td>
                        <td>{{ i.shell_path }}</td>
                        <td>{{ i.change_show }}</td>
                        <td>{{ i.crtime | date:'Y-m-d H:i:s' }}</td>

                        <td>
                            <a style="cursor:pointer"
                               onclick="oratk_tool_script_content({{ i.id }})">查看脚本内容</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {#分页#}
            {% include 'basic_app/paginator_common_ajax.html' %}

        </div>
    </div>

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">ora脚本内容(当前版本) &nbsp
            <button type="button" class="btn btn-primary"
                    onclick="script_content_edit()"><span
                    class="glyphicon glyphicon-wrench" aria-hidden="true"></span> 修改脚本内容
            </button>
        </h3>

        <pre type="text" name="res" id="res">{{ ora_shell_content }}</pre>
    </div>

    {#    查看脚本内容的模态框#}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width:1000px" id="docModalContent">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">脚本内容</h4>
                </div>
                <span>&nbsp</span>
                <div class="col-sm-12 modal-body">
                            <textarea id="script_conent" style="width:960px;height:720px" type="text_area"
                                      name="script_conent" placeholder="script_conent"></textarea>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    {#    编辑脚本内容的模态框#}
    <div class="modal fade" id="myModal_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog_edit">
            <div class="modal-content" style="width:1000px" id="docModalContent_edit">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">脚本内容</h4>
                </div>
                <div>&nbsp</div>
                <div class="col-md-4">
                    <input type="text" class="form-control" placeholder="请输入修改说明" id="script_content_edit_submit">
                </div>
                <button type="button" class="btn btn-primary" onclick="script_content_edit_submit()"><span
                        class="glyphicon glyphicon-ok"
                        aria-hidden="true"></span> 提交
                </button>
                <div>&nbsp</div>
                <div class="col-sm-12">
                            <textarea id="script_content_edit" style="width:960px;height:710px" type="text_area"
                                      name="script_content_edit" placeholder="script_content_edit"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!--上传 ora file 模态框-->
    <div class="modal fade" id="myModal_upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="docModalContent" style="width:600px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">上传 ora 脚本</h4>
                </div>
                <span>&nbsp</span>
                <form class="form-horizontal" style="padding-left: 10%" id="editForm">
                    <div class="form-group" style="display: none">
                        <label class="col-sm-2 control-label">id：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_id"
                                   placeholder="id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">ip：</label>
                        <div class="col-sm-10">
                            <input type="text" id="add_ip" style="width:300px;" class="form-control"
                                   name="add_ip"
                                   placeholder="ip地址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">port：</label>
                        <div class="col-sm-10">
                            <input type="text" id="add_port" style="width:300px;" class="form-control"
                                   name="add_port"
                                   placeholder="ssh端口号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">user：</label>
                        <div class="col-sm-10">
                            <input type="text" id="add_user" style="width:300px;" class="form-control"
                                   name="add_user"
                                   placeholder="ssh用户">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">pwd：</label>
                        <div class="col-sm-10">
                            <div style="position: relative; width: 300px;">
                                <input type="password" id="add_pwd" style="width: 100%;" class="form-control"
                                       name="add_pwd"
                                       placeholder="password">
                                <button type="button" id="togglePassword" style="position: absolute; right: 10px; top: 50%;
            transform: translateY(-50%); background: none; border: none; cursor: pointer;">
                                    👁
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">remark：</label>
                        <div class="col-sm-10">
                            <input type="text" id="add_remark" style="width:300px;" class="form-control"
                                   name="add_remark"
                                   placeholder="备注">
                        </div>
                    </div>
                    <!-- 新增的文件上传部分 -->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">file：</label>
                        <div class="col-sm-10">
                            <input type="file" class="form-control" id="fileUpload" name="file_upload"
                                   style="width: 300px; display: inline-block;">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" data-loading-text="Loading..." class="btn btn-primary"
                                id="id_ssh_connect_test" onclick="ssh_connect_test()">测试链接
                        </button>
                        {#                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>#}
                        <button type="button" data-loading-text="Loading..." class="btn btn-primary"
                                id="id_upload_submit" onclick="upload_ora_file_submit()">上传
                        </button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


{% endblock %}


{% block script %}
    <script>

        // 假设有一个变量来判断文件是否已经上传
        let isFileUploaded = false; // 你可以根据实际情况来修改这个值

        // 根据文件上传状态更新按钮文本
        function updateUploadButtonText() {
            const button = document.getElementById('uploadButton');
            if (isFileUploaded) {
                button.innerHTML = '<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> 重新上传脚本';
            } else {
                button.innerHTML = '<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> 上传脚本';
            }
        }


        //密码隐藏与明文切换
        $(document).ready(function () {
            $("#togglePassword").click(function () {
                let input = $("#add_pwd");
                let type = input.attr("type") === "password" ? "text" : "password";
                input.attr("type", type);
            });
        });

        //校验 ip 地址合法
        function isValidIP(ip) {
            let ipPattern = /^(25[0-5]|2[0-4][0-9]|1?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|1?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|1?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|1?[0-9][0-9]?)$/;
            return ipPattern.test(ip);
        }

        // 校验端口号范围
        function isValidPort(port) {
            let portPattern = /^[0-9]+$/;
            return portPattern.test(port) && port >= 1 && port <= 65535;
        }

        //upload 模态框内容审查
        function check_upload_file() {
            let ip = $("input[name='add_ip']").val().trim();
            let port = $("input[name='add_port']").val().trim();
            if (!(isValidIP(ip) && isValidPort(port))) {
                // 判断 result 是否以 "ERROR" 开头
                var iconType = "error"
                var title = iconType === "error" ? "ip 或 port 不合法" : "格式合法"
                var result = "请输入合法的 ip 或 port"
                let iscancelButton = false;
                // 调用公共方法弹窗
                showAlert(title, result, iconType, iscancelButton);
                return false;
            }
            //判断用户名和密码
            let user_info = $('#add_user').val()
            let pwd_info = $('#add_pwd').val()
            // 检查用户名和密码是否为空
            if (user_info === "" || pwd_info === "") {
                var iconType = "error";
                var title = "用户名或密码为空";
                var result = "请填写用户名和密码";
                let iscancelButton = false;
                // 调用公共方法弹窗
                showAlert(title, result, iconType, iscancelButton);
                return false;
            }
        }
    </script>
    <script>

        //展示上传ora file模态框
        function upload_ora_file() {
            //调用模态框
            $('#myModal_upload').modal('show')
        }


        //测试 sshd 联通性
        function ssh_connect_test() {
            check_upload_file();
            let ip = $("input[name='add_ip']").val().trim();
            let port = $("input[name='add_port']").val().trim();
            let user_info = $('#add_user').val();
            let pwd_info = $('#add_pwd').val();
            $.ajax({
                type: "POST",
                data: {
                    'ip': ip,
                    'port': port,
                    'user': user_info,
                    'pwd': pwd_info
                },
                url: "/oratk_app/oratk_tool_info_ora_shell_ssh_connect", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    var result = JSON.parse(result);
                    if (result.status === 'success') {
                        var iconType = "success";
                        var title = "ssh成功";
                        var result = result.message;
                        let iscancelButton = false;
                        // 调用公共方法弹窗
                        showAlert(title, result, iconType, iscancelButton);
                    } else {
                        var iconType = "error";
                        var title = "ssh失败";
                        var result = result.message;
                        let iscancelButton = false;
                        // 调用公共方法弹窗
                        showAlert(title, result, iconType, iscancelButton);
                    }
                },
                error: function (xhr, status, error) {
                    // 处理请求失败的情况
                    alert("连接失败，请稍后再试！");
                }
            });
        }

        //上传文件
        function upload_ora_file_submit() {
            check_upload_file();
            let ip = $("input[name='add_ip']").val().trim();
            let port = $("input[name='add_port']").val().trim();
            let user_info = $('#add_user').val()
            let pwd_info = $('#add_pwd').val()
            let remark_info = $('#add_remark').val()

            //上传文件
            // 获取文件上传控件中的文件
            let fileInput = $("input[name='file_upload']")[0]; // 获取文件上传控件
            let file = fileInput.files[0]; // 获取选中的第一个文件
            if (file == null || file == "") {
                var iconType = "error";
                var title = "检查文件失败";
                var result = "请正确的选择文件";
                let iscancelButton = false;
                // 调用公共方法弹窗
                showAlert(title, result, iconType, iscancelButton);
                return false;
            }

            let formData = new FormData();
            formData.append('ip', ip);
            formData.append('port', port);
            formData.append('user', user_info);
            formData.append('pwd', pwd_info);
            formData.append('remark', remark_info);
            formData.append('file_upload', file);  // 将文件对象附加到 FormData 中
            $.ajax({
                url: '/oratk_app/oratk_tool_info_ora_shell_upload',  // 修改为上传文件的正确 URL
                type: 'POST',
                data: formData,
                processData: false, // 不处理数据( 必须有)
                contentType: false,  //不设置内容类型 ( 必须要)
                success: function (result) {
                    // 上传成功后，处理服务器返回的结果
                    console.log(result)
                    //var result = JSON.parse(result);
                    if (result.status === 'success') {
                        var iconType = "success";
                        var title = "上传成功";
                        var message = result.message;
                        let iscancelButton = false;
                        showAlert(title, message, iconType, iscancelButton, function () {
                              location.reload();// 刷新页面
                        });  // 弹窗提示
                    } else {
                        var iconType = "error";
                        var title = "上传失败";
                        var message = result.message;
                        let iscancelButton = false;
                        showAlert(title, message, iconType, iscancelButton);  // 弹窗提示
                    }
                },
                error: function (xhr, status, error) {
                    // 如果 AJAX 请求失败，显示错误信息
                    console.error("上传文件失败", error);
                    var iconType = "error";
                    var title = "上传失败";
                    var message = "网络错误，请稍后再试";
                    let iscancelButton = false;
                    showAlert(title, message, iconType, iscancelButton);  // 弹窗提示
                }
            });

        }


        //查看脚本内容
        function oratk_tool_script_content(id) {
            var nid = id;
            $.ajax({
                type: "POST",
                data: {
                    'nid': nid,
                    'script_content_byid': 'YES'
                },
                url: "/oratk_app/oratk_tool_info_ora_shell_paginator_ajax", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    $("#script_conent").val(result);
                    $('#script_conent').attr("disabled", "disabled");
                    //调用模态框
                    $('#myModal').modal('show')
                }
            })
        }

        //修改脚本内容
        function script_content_edit() {
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_tool_info_ora_shell_edit_ajax", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    console.log(1)
                    $("#script_content_edit").val(result);
                    console.log(2)
                    //调用模态框
                    $('#myModal_edit').modal('show')
                }
            })
        }


        //修改脚本内容提交
        function script_content_edit_submit() {
            var shell_content = $('#script_content_edit').val()
            var change_desc = $('#script_content_edit_submit').val()
            if (change_desc.length == 0) {
                alert('请输入修改说明');
                return false;
            }
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_tool_info_ora_shell_edit", //后台处理函数的url
                data: {
                    'shell_content': shell_content,
                    'change_desc': change_desc
                },
                cache: false,
                dataType: "html",
                success: function (result) {
                    if (result == 'success') {
                        window.location.href = window.location.href;
                    } else {
                        alert(result);
                    }

                }
            })
        }

        //查看编辑脚本内容模态框居中
        $("#myModal_edit").on('show.bs.modal', function () {
            modalResize_edit()
        })
        //编辑脚本内容模态框居中
        $(window).resize(function () {
            modalResize_edit();
        })

        function modalResize_edit() {
            console.log(4)
            var winWidth = $(document.body).width();
            var modalWidth = $("#docModalContent_edit").width();
            var width = (winWidth - modalWidth) / 2 + "px"
            console.log(winWidth, modalWidth, width)
            $("#myModal_edit").find(".modal-dialog_edit").css({
                'margin-left': width
            });
        }


    </script>
{% endblock %}